<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<link rel="stylesheet" href="../../css/editor/style.css">
	<!-- <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"/> -->
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
<style>
	#editor—wrapper {
		border: 1px solid #ccc;
		z-index: 100;
		/* 按需定义 */
	}

	#toolbar-container, #toolbar-container-brief {
		border-bottom: 1px solid #ccc;
	}

	#editor-container, #editor-container-brief {
		height: 300px;
	}
</style>

</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<div class="layui-form-item">
			<div class="layui-col-md6">
				<label class="layui-form-label">上级展项</label>
				<div class="layui-input-block">
					<input type="text" name="one_name" disabled class="layui-input">
				</div>
			</div>
			<div class="layui-col-md6">
				<label class="layui-form-label">名称</label>
				<div class="layui-input-block">
					<input type="text" name="name" disabled class="layui-input">
				</div>
			</div>
			
		</div>
		<div class="layui-form-item">
			<div class="layui-col-md6">
				<label class="layui-form-label">英文名称</label>
				<div class="layui-input-block">
					<input type="text" name="english_name" disabled class="layui-input">
				</div>
			</div>
			<div class="layui-col-md6">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-block">
					<input type="text" name="sort" disabled class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图片</label>
			<div class="layui-input-block">
				<div class="img-list" id="img-list" style="margin-top: 5px;"></div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-col-md6">
				<label class="layui-form-label">音频</label>
				<div class="layui-input-block">
					<div class="audio-list"></div>
					<input type="hidden" name="audio_url" id="audio_url">
					<input type="hidden" name="audio_id" id="audio_id">
				</div>
			</div>
			
			<div class="layui-col-md6">
				<label class="layui-form-label">视频</label>
				<div class="layui-input-block">
					<div class="video-list"></div>
					<input type="hidden" name="video_url" id="video_url">
					<input type="hidden" name="video_id" id="video_id">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">简介</label>
			<div class="layui-input-block">
				<div id="editor—wrapper">
					<div id="toolbar-container-brief"><!-- 工具栏 --></div>
					<div id="editor-container-brief"><!-- 编辑器 --></div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">内容</label>
			<div class="layui-input-block">
				<div id="editor—wrapper">
					<div id="toolbar-container"><!-- 工具栏 --></div>
					<div id="editor-container"><!-- 编辑器 --></div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<a class="layui-btn layui-btn-primary close">关闭</a>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<!-- <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script> -->
<script src="../../js/editor/index.js"></script>
<script type="text/javascript">
	layui.use(["form", "okLayer", "okUtils", "okMock", "laydate", 'upload'], function () {
		let $ = layui.jquery;
		let form = layui.form;
		let okMock = layui.okMock;
		var upload = layui.upload;
        let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;

		//关闭loading
		okLoading.close();

		const { createEditor, createToolbar } = window.wangEditor

		const editorConfig = {
			readOnly: true,
		}

		//实例化编辑器
		const editor = createEditor({
			selector: '#editor-container',
			config: editorConfig,
		})
		const editorBrief = createEditor({
			selector: '#editor-container-brief',
			config: editorConfig,
		})

		//获取url地址中的参数
        var id = okUtils.getUrlParams("id");
		//获取详情
		okUtils.ajax(okMock.api.exhibit_two.detail, "get", {id: id}).done(function (response) {
			if (response.code == HTTP_OK) {
				let one_id = response.data.one_id;
				//将数据填充到表单中
				$('input[name="one_name"]').val(response.data.one_name);
				$('input[name="name"]').val(response.data.name);
				$('input[name="english_name"]').val(response.data.english_name);
				$('input[name="sort"]').val(response.data.sort);
				
				//遍历多媒体文件
				$.each(response.data.item, function (index, item) {
					if (item.type == 1) {
						//把图片展示出来
						$('.img-list').append('<div style="margin: 0 5px 5px 5px;display: inline-block;"><img src="'+ item.url +'" style="height: 200px;"></div>');	
					} else if (item.type == 2) {
						//把音频展示出来
						$('.audio-list').html('<div style="margin: 0 5px 0 5px;display: inline-block;"><audio src="'+ item.url +'" controls></audio></div>');
					} else if (item.type == 3) {
						//把视频展示出来
						$('.video-list').html('<div style="margin: 0 5px 0 5px;display: inline-block;"><video style="width:200px;" src="'+ item.url +'" controls></video></div>');
					}
				})
				//图片查看器
				layer.photos({
					photos: '#img-list'
					,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
				});

				//将内容填充到编辑器中
				editor.setHtml(response.data.content);
				editorBrief.setHtml(response.data.brief);
				form.render();
			} else {
				layer.msg(response.message, { icon: 2, time: 2000 });
			}
		}).fail(function (error) {});
		

		//关闭当前页面
        $(".close").click(function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index);
        });

	})
</script>
</body>
</html>
